
<template>
  <div>

    <h2>侦听器</h2>

    <input type="text" v-model="uname" />

  </div>
</template>

<script>
export default {
  data() {
    return {
      uname: '张三',
      dog: {
        name: '旺财',
        age: 2
      }
    }
  },
  //  侦听器，要写到和 data 平级的 watch 里面
  watch: {
      
    // 1、----------- 函数写法 ---------------
    // uname (newVal, oldVal) {
    //   console.log(newVal, oldVal)
    // }
      
    // 2、----------- 对象写法 ---------------
    // 写成对象方法，就是为了加 immediate 和 deep 选项
    uname: {
      handler (newVal, oldVal) {
        //  写对象格式，handler 必须写，且名字固定
        console.log(newVal, oldVal)
      },
      immediate: true  // 加入这个选项，表示立即侦听（通俗的说，打开页面马上侦听，获取到初始值）
    },
    
    
    dog: {
      handler (newVal, oldVal) {
        console.log(newVal, oldVal)
      },
      deep: true      //  深度侦听，用于侦听对象的属性变化
    },


    // --------------只侦听对象的某个属性---------------
    'dog.age' (newVal) {
      console.log(newVal)
    }
  }
}
</script>

<style>

</style>